<template>
  <div>
    <div class="base">
      <div class="title title-font">已报名</div>
      <div class="enroll-number">
        <template v-for="item in enrollNumber.toString()">
          <div class="enroll-number-item">{{ item }}</div>
        </template>
      </div>
      <div class="countdown">
        <TimeView :times.sync="times"/>
      </div>
    </div>
    <div class="baseB">
      <CenterUpListData :dataList.sync="dataList" :centerUpBoxHeight="centerUpBoxHeight"/>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {Message} from "element-ui";
import TimeView from "./TimeView";
import CenterUpListData from "./CenterUpListData.vue";
export default {
  name: "CenterUpBox",
  components: {
    TimeView,
    CenterUpListData
  },
  props: {
    times: {
      type: Object,
      default: () => {
        return {
          start: '',
          end: '',
        }
      }
    },
    enrollNumber: {
      type: String,
      default: '00'
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    centerUpBoxHeight: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      dateMeta: {
        showMillisecond: 0,
        showDay: 0,
        showHour: 0,
        showMinute: 0,
        showSecond: 0
      }
    }
  },
  computed: {
    startTimestamp() {
      if (this.times.start) {
        return moment(this.times.start).valueOf();
      }
      return moment().valueOf()
    },
    endTimestamp() {
      if (this.times.end) {
        return moment(this.times.end).valueOf();
      }
      return moment().valueOf()
    }
  },
  mounted() {
    this.initStart()
  },
  watch: {
    times: {
      handler(val) {
        if (val) {
          this.initStart();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initStart() {
      if (this.times && this.times.start) {
        if (moment(this.times.start).valueOf() >= moment().valueOf()) {
          this.start = false
          return
        }
      }
      this.start = true
    },
    handleStartFinish() {
      this.start = true
    },
    handleFinish() {
      Message.warning('活动已结束')
    },
    handleChange(val) {
      if (val && val.meta) {
        this.dateMeta = val.meta
      }
    }
  }
}
</script>

<style scoped lang="scss">

.base {
  width: 100%;
  .title {
    text-align: center;
    padding: 30px 0;
  }
  .title-font {
    line-height: 1;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0 1.8rem;
    text-shadow: 0 .15rem 0 #3258a6;
  }
  .enroll-number {
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    margin-bottom: .75rem;
    .enroll-number-item {
      width: 5.9rem;
      height: 7.1rem;
      line-height: 6.5rem;
      color: #ffe400;
      font-size: 6rem;
      font-weight: 700;
      text-align: center;
      background-repeat: no-repeat;
      background-position: top;
      background-image: url("../../../../../assets/images/bigdata/center_little_bg.png");
      background-size: contain;
    }
  }

  .countdown {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>
